<template>
  <div v-if="abc.userinfo.userId">
    <h1>房型添加</h1>
    <div>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td align="right">房型名称</td>
            <td>
              <input type="text" v-model="query.typeName"/>
            </td>
          </tr>
          <tr>
            <td align="right">单价</td>
            <td>
              <input type="text" v-model="query.price"/>
            </td>
          </tr>
          <tr>
            <td align="right">房型面积</td>
            <td>
              <input type="text" v-model="query.area"/>
            </td>
          </tr>
          <tr>
            <td align="right">最多入住人数</td>
            <td>
              <input type="number" v-model="query.peoples" min="1"/>
            </td>
          </tr>
          <tr>
            <td align="right">房型图片</td>
            <td>
              <input type="file" @change="img" />
              <img :src="query.houseImg" alt="" width="160px" height="100px" v-if="query.houseImg != ''"/>
            </td>
          </tr>
          <tr>
            <td align="right">房型描述</td>
            <td>
              <textarea v-model="query.desc"></textarea>
            </td>
          </tr>
          <tr>
            <td align="right">是否有窗</td>
            <td>
              <input type="radio" :value="0" name="info" v-model="query.isWin"/>是
              <input type="radio" :value="1" name="info" v-model="query.isWin"/>否
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <input type="button" value="添加" class="btn btn-success" @click="ok"/>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    {{ abc.userinfo }}
  </div>
  <div v-else>您还没有登录</div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();


import {useUserStore} from '@/stores/user'
const abc=useUserStore();

let query:any=reactive
({
  "typeName": "",
  "price": "",
  "area": "",
  "peoples": "",
  "houseImg": "",
  "desc": "",
  "isWin": 0
})

//上传图片
const img=(e:any)=>
{
    console.log(e);
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios
    ({
      url:'/api/Img/Photo',
      method:'post',
      data:f
    })
    .then(res=>{
      console.log(res);
      query.houseImg=res.data;
    })
    .catch(err=>{

    })
}

const ok=()=>
{
  if(query.typeName=="")
  {
    alert("房型名称不能为空");
    return;
  }
  if(query.price=="")
  {
    alert("房型价格不能为空");
    return;
  }
  let reg=/^[1-9]\d+(\.[0-9]+)?$/;
  if(reg.test(query.price)==false)
  {
    alert("房型价格只能是正数");
    return;
  }
  if(query.area=="")
  {
    alert("面积不能为空");
    return;
  }
  if(query.peoples=="")
  {
    alert("入住人数不能为空");
    return;
  }
  if(query.houseImg=="")
  {
    alert("房型图片不能为空");
    return;
  }
  axios
  ({
    url:'/api/House/HouseAdd',
    method:'post',
    data:query
  })
  .then(res=>{
    if(res.data>0)
    {
      alert("添加成功");
      router.push('/houseList');
      return;
    }
    else
    {
      alert("添加失败");
      return;
    }
  })
  .catch(err=>{

  })
}
</script>

<style scoped></style>
